<template>
  <div class="preview">
    <el-main class="partLeft">
      <div class="mainTab">
        <el-button
          v-for="(item,index) in mainTab.list"
          :key="index"
          @click="mainTab.current=index"
          :class="{resetButton : mainTab.current!=index , searchButton : mainTab.current == index}"
        >{{item.name}}</el-button>
      </div>
      <!-- 大转盘 -->
      <div
        class="lottery"
        :class="mainTab.current != 0 ?'':'addLotteryLen'"
        :style="{backgroundImage: 'url(' + descJson.homeJson.mainBgImage + ')' }"
      >
        <div class="phone">
          <img v-if="mainTab.current == 0" src="/static/images/lottery/phone2.png" alt />
          <img v-else src="/static/images/lottery/phone.png" alt />
        </div>
        <div class="turnplate">
          <div class="realCanvas">
            <canvas ref="myCanvas" id="myCanvas" width="333" height="333"></canvas>
            <div class="pointer">
              <span :style="{background:descJson.homeJson.drawButtonColor}">
                点击
                <br />抽奖
              </span>
              <img src="/static/images/lottery/btn.png" alt />
            </div>
          </div>
        </div>
        <div class="count">今日免费抽奖次数：10</div>
        <div class="rule" v-if="actRule.desc &&mainTab.current==0">
          <p class="tit">活动规则</p>
          <div class="rule-info">
            <pre v-html="actRule.desc" class="des"></pre>
          </div>
        </div>
        <!-- 中奖啦 -->
        <div v-if="mainTab.current==1" class="box">
          <div
            class="info"
            :style="{backgroundImage: 'url(' + descJson.winningJson.bgImage + ')' }"
          >
            <h3>中奖啦</h3>
            <div class="img">
              <img :src="descJson.winningJson.winImage" alt />
            </div>
            <div class="name">
              <p>一等奖</p>
              <p>奖品名称</p>
            </div>
            <el-button
              class="btn"
              :style="{background: descJson.winningJson.editUserInfoButtonColor}"
            >编辑个人信息</el-button>
          </div>
        </div>
        <!-- 谢谢参与，再接再厉 -->
        <div class="box" v-if="mainTab.current==2">
          <div
            class="info"
            :style="{backgroundImage: 'url(' + descJson.noWinningJson.bgImage + ')' }"
          >
            <h3>谢谢参与，再接再厉</h3>
            <div class="img">
              <img :src=" descJson.noWinningJson.noWinImage" alt />
            </div>
            <el-button
              class="btn"
              :style="{background: descJson.noWinningJson.aginButtonColor}"
            >再来一次</el-button>
          </div>
        </div>
        <!-- 编辑个人信息 -->
        <div v-if="mainTab.current==3" class="box">
          <div
            class="info lotteryRuleForm"
            :style="{backgroundImage: 'url(' + descJson.editUserInfoJson.bgImage + ')' }"
          >
            <h3>编辑个人信息</h3>
            <el-form
              :model="lotteryRuleForm"
              :rules="lotteryRules"
              ref="lotteryRuleForm"
              label-width="84px"
              label-position="right"
            >
              <el-form-item prop="name">
                <span
                  slot="label"
                  class="label"
                  :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                >姓名</span>
                <el-input v-model="lotteryRuleForm.name" clearable placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item prop="mobile">
                <span
                  slot="label"
                  class="label"
                  :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                >手机号</span>
                <el-input
                  v-model.number="lotteryRuleForm.mobile"
                  clearable
                  maxlength="11"
                  placeholder="请输入联系手机号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="email">
                <span
                  slot="label"
                  class="label"
                  :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
                >
                  邮寄
                  <br />地址
                </span>
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="lotteryRuleForm.email"
                  clearable
                  placeholder="请输入邮寄详细地址"
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button
              class="btn"
              :style="{background:descJson.editUserInfoJson.confirmButtonColor}"
            >确认</el-button>
          </div>
        </div>
      </div>
    </el-main>
    <div class="step-button">
      <el-button class="searchButton" @click="back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import $ from "@/assets/js/jquery.min.js";
import turntable from "@/assets/js/turntable.js";
export default {
  data() {
    return {
      mainTab: {
        current: 0,
        list: [
          {
            id: 1,
            name: "首页"
          },
          {
            id: 2,
            name: "中奖页面"
          },
          {
            id: 3,
            name: "没中奖页面"
          },
          {
            id: 4,
            name: "编辑个人信息"
          }
        ]
      },
      descJson: {
        homeJson: {
          mainBgImage: require("../../../../../static/images/lottery/homeBg.png"),
          drawButtonColor: "#ef5851",
          turntableColor: "#fb554d"
        },
        winningJson: {
          editUserInfoButtonColor: "",
          winImage: require("../../../../../static/images/lottery/win.png"),
          bgImage: require("../../../../../static/images/lottery/winBg.png")
        },
        noWinningJson: {
          aginButtonColor: "#f55a5c",
          noWinImage: require("../../../../../static/images/lottery/nowin.png"),
          bgImage: require("../../../../../static/images/lottery/winBg.png")
        },
        editUserInfoJson: {
          confirmButtonColor: "",
          bgImage: require("../../../../../static/images/lottery/winBg.png")
        }
      },
      lotteryRuleForm: {
        name: "",
        mobile: "",
        email: ""
      },
      lotteryRules: {
        name: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入联系手机号", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      },
      wheelSurf: "", //转盘
      list: {},
      angel: 0, //角度
      actRule: {
        desc: `1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
2，金币抽奖，每10个金豆可兑换一次大转盘机会。
3，所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品。
1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
2，金币抽奖，每10个金豆可兑换一次大转盘机会。
3，所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品。
1，每日签到后，即可获得一次幸运发转盘的机会，仅限当天有效，过期作废。
`
      },
      formDataList: [
        {
          awardsRefName: "现金券30元",
          awardsPicUrl: require("../../../../../static/images/lottery/youhuiquan.png")
        },
        {
          awardsRefName: "红包",
          awardsPicUrl: require("../../../../../static/images/lottery/hongbao20.png")
        },
        {
          awardsRefName: "现金券10元",
          awardsPicUrl: require("../../../../../static/images/lottery/youhuiquan10.png")
        },
        {
          awardsRefName: "红包",
          awardsPicUrl: require("../../../../../static/images/lottery/hongbao20.png")
        },
        {
          awardsRefName: "现金券50元",
          awardsPicUrl: require("../../../../../static/images/lottery/youhuiquan10.png")
        },
        {
          awardsRefName: "红包",
          awardsPicUrl: require("../../../../../static/images/lottery/hongbao20.png")
        }
      ]
    };
  },
  methods: {
    detailFun() {
      this.utils.request.createOrUpdateDetail(
        { id: this.$route.params.id },
        res => {
          if (res.code == "0000") {
            this.descJson = res.data.descJson;
            this.getAngel();
            this.getAngel();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        }
      );
    },

    getAngel() {
      // 清空画布
      var c = this.$refs["myCanvas"];
      var cxt = c.getContext("2d");
      c.height = c.height;
      let turntableColor = "";

      if (this.formDataList) {
        this.angel = 360 / this.formDataList.length;
        // 格式化成插件需要的奖品列表格式
        this.list = this.formDataList.map(m => {
          return {
            id: m.id,
            name: m.awardsRefName,
            image: m.awardsPicUrl
          };
        });
      }
      this.wheelSurf = turntable({
        myCanvas: this.$refs["myCanvas"],
        list: this.list, // 奖品 列表，(必填)
        outerCircle: {
          color: this.descJson.homeJson.turntableColor // 外圈颜色(可选)
        },
        innerCircle: {
          color: "#fff" // 里圈颜色(可选)
        },
        dots: ["#fff", "#fff7af"], // 装饰点颜色(可选)
        disk: [
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af",
          "#fcf9f0",
          "#fff7af"
        ], //中心奖盘的颜色，默认7彩(可选)
        title: {
          color: "#E34A44",
          font: "8px Arial"
        } // 奖品标题样式(可选)
      });
      this.wheelSurf.init();
    },
    // tabs, 删除tab
    removeTabHandle(tabName) {
      this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
      if (this.mainTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          this.$router.push(
            { path: "/Pages/MarketingTools/LargeTurntable/LargeTurntable" },
            () => {
              this.mainTabsActiveName = this.$route.name;
            }
          );
        }
      } else {
        this.$router.push(
          { path: "/Pages/MarketingTools/LargeTurntable/LargeTurntable" },
          () => {
            this.mainTabsActiveName = this.$route.name;
          }
        );
      }
    },
    back() {
      this.removeTabHandle(this.mainTabsActiveName);
    }
  },
  mounted() {
    if (this.$route.params.id && this.$route.params.id != 0) {
      this.detailFun();
    }
  },
  computed: {
    mainTabs: {
      get() {
        return this.$store.state.tab.mainTabs;
      },
      set(val) {
        this.$store.commit("updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.tab.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("updateMainTabsActiveName", val);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import '../../../../assets/css/public.scss';
.preview {
  width: 820px;
  height: 1300px;
  margin: 20px auto;
}
</style>